<!--
 * @Author: QUAN
 * @Date: 2021-11-10 14:27:53
 * @LastEditTime: 2021-11-25 14:31:17
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \mutong-jimu-h5\src\views\Home\index.vue
-->
<template>
  <div class="user">
    <!-- 背景图片 -->
    <!-- :style="{background:`url(${coverImage}) 0 0 / contain no-repeat`}" -->
    <div
      class="bg company-bg"
      v-if="isCompany"
      :style="{ background: `url(${coverImage}) center center / cover no-repeat` }"
    >
      <!-- <img :src="coverImage" alt="" /> -->
    </div>

    <div class="bg" v-else :style="{ background: `url(${coverImage}) center center / cover no-repeat` }">
      <!-- <img :src="coverImage" alt="" /> -->
    </div>

    <!-- 基本信息啥的 -->
    <div class="main-info">
      <img class="avator" :src="userDataBase.avatar" alt="" />
      <div class="info">
        <p class="nickname">
          <span class="nickname-info">{{ userDataBase.nickname }}</span>
          <img src="../../assets/images/badge.png" alt="" v-if="!isCompany" />
          <span
            class="badge"
            v-if="!isCompany"
            v-app-jump="{ to: `mtjimu://homepage?uid=${this.uuid}` }"
          >
            <span class="badge-number">{{ userDataBadge.count }} 徽章</span>
            <img src="../../assets/images/arrow-right.png" alt="">
          </span>
        </p>
        <p
          class="authentication"
          v-if="userDataProfile.identification && userDataProfile.identification.identified"
        >
          <img src="../../assets/images/icon-auth2.png" v-if="isCompany" alt="" />
          <img src="../../assets/images/icon-auth.png" v-if="isPerson" alt="" />
          <span>认证：{{ userDataBase.identifiedTitle }}</span>
        </p>
        <p
          class="authentication city"
          v-else-if="userDataProfile.profession || userDataProfile.city"
        >
          <span>{{ userDataProfile.city }}</span>
          <span v-if="userDataProfile.profession && userDataProfile.city"> · </span>
          <span>{{ userDataProfile.profession }}</span>
        </p>
        <p class="job" v-if="!isCompany">{{ userDataProfile.intro }}</p>
        <p class="q-button">
          <button v-app-jump="{ to: `mtjimu://homepage?uid=${this.uuid}` }">私信</button>
          <button v-app-jump="{ to: `mtjimu://homepage?uid=${this.uuid}` }">关注</button>
        </p>
        <div class="company" v-if="isCompany && userDataExtra.ability">
          <div class="company-name">公司介绍</div>
          <div class="company-info">
            {{ userDataExtra.ability }}
          </div>
        </div>

        <!-- 作品墙 -->
        <div
          class="wall"
          v-if="userDataWall.length"
          v-app-jump="{ to: `mtjimu://workwall?uid=${this.uuid}` }"
        >
          <div class="wall-box">
            <div class="wall-item" v-for="item in userDataWall.slice(0, 2)" :key="item.id">
              <div
                class="wall-img"
                :style="{ background: `url(${item.cover}) center center / cover no-repeat` }"
              >
                <!-- <img :src="item.cover" alt="" /> -->
              </div>
              <p class="title">{{ item.title }}</p>
              <p class="wall-job">
                <img src="../../assets/images/job.png" alt="" />
                <span>{{ item.job }}</span>
              </p>
            </div>
          </div>
          <div class="wall-more">
            <span>查看影视作品墙</span>
            <div class="more">{{ wallCount }}</div>
          </div>
        </div>
      </div>
      <div class="q-tabs">
        <van-tabs color="#000" v-model="activeTab" line-width="55px">
          <van-tab
            :title="' 课程 ' + (userDataCourse.length ? courseTotal : '')"
            v-if="userDataCourse.length"
          >
            <production
              :uuid="uuid"
              :list="userDataCourse"
              v-app-jump="{ to: `mtjimu://homepage?uid=${this.uuid}` }"
              :id="`production-${uuid}`"
            ></production>
            <!-- 查看更多 -->
            <div
              class="show-more"
              v-app-jump="{ to: `mtjimu://homepage?uid=${this.uuid}` }"
            >
              <span>查看更多</span>
            </div>
          </van-tab>
          <van-tab
            :title="' 作品 ' + (works.length ? workTotal : '')"
            v-if="!isCompany || (works.length && isCompany)"
          >
            <!-- 由于不能复用组件内的，就在这里重写一下 -->
            <img
              src="@/assets/images/to-jimu.png"
              v-app-jump="{ to: `mtjimu://homepage?uid=${this.uuid}` }"
              class="to-jimu"
              alt=""
              v-if="!works || !works.length"
            />
            <production
              :uuid="uuid"
              :list="works"
              v-else
              v-app-jump="{ to: `mtjimu://homepage?uid=${this.uuid}` }"
              :id="`production-${uuid}`"
            ></production>
            <!-- 查看更多 -->
            <div
              class="show-more"
              v-app-jump="{ to: `mtjimu://homepage?uid=${this.uuid}` }"
              v-if="works.length"
            >
              <span>查看更多</span>
            </div>
          </van-tab>
          <van-tab
            v-if="isCompany || (userDataJob.length && !isCompany)"
            :title="' 招聘 ' + (userDataJob.length ? jobTotal : '')"
          >
            <img
              src="@/assets/images/to-jimu.png"
              v-app-jump="{ to: `mtjimu://homepage?uid=${this.uuid}` }"
              class="to-jimu"
              alt=""
              v-if="!userDataJob || !userDataJob.length"
            />
            <Recruitment
              v-else
              :userDataJob="userDataJob"
              @conect="conect"
              :uid="uuid"
            ></Recruitment>
            <!-- 查看更多 -->
            <div
              class="show-more"
              v-app-jump="{ to: `mtjimu://homepage?uid=${this.uuid}` }"
              v-if="userDataJob.length"
            >
              <span>查看更多</span>
            </div>
          </van-tab>
          <van-tab title="资料">
            <InfoData
              :userDataExtra="userDataExtra"
              :userDataProfile="userDataProfile"
              :userDataBase="userDataBase"
              :userDataSkill="userDataSkill"
              :userDataBadge="userDataBadge"
              :uuid="uuid"
            ></InfoData>
          </van-tab>
        </van-tabs>
      </div>
    </div>

    <!-- <div class="line"></div> -->

    <!-- 结尾 -->
    <!-- <div class="footer">
      <div class="footer-button">打开积幕，查看更多</div>
      <div class="footer-copyright">
        Copyright ©
        {{ userDataBase.nickname }}
        . All Rights Reserved.
      </div>
    </div> -->
    <div class="kong"></div>
    <BottomOpenAppAdv v-app-jump="{ to: `mtjimu://homepage?uid=${this.uuid}` }"></BottomOpenAppAdv>
  </div>
</template>
<script>
  import { Button, Icon, Toast, Tab, Tabs } from 'vant';
  import Production from '../UserInfo/Production.vue';
  import Recruitment from './Recruitment.vue';
  import InfoData from './InfoData.vue';
  import BottomOpenAppAdv from '@/components/BottomOpenAppAdv';
  import dayjs from 'dayjs';
  import qs from 'qs';
  export default {
    components: {
      'van-tab': Tab,
      'van-tabs': Tabs,
      Production,
      Recruitment,
      InfoData,
      BottomOpenAppAdv,
    },
    data() {
      return {
        coverImage: 'https://ketang-pub.movtile.com/res/homepage-default.jpg', // 背景图
        activeTab: '0', // tab的位置
        works: [], //用户作品
        userDataBase: {}, //用户基本信息
        userDataExtra: {}, //用户额外信息
        // userDataEducation: [], //用户教育经历
        userDataProfile: {}, //用户认证信息
        userDataJob: [], //用户招聘列表
        userDataSkill: [], //TA的技能
        userDataCourse: [], //用户课程列表
        userDataWall: [], //用户作品墙
        wallCount: 0, //影视作品墙的数量
        userDataBadge: [], //用户徽章列表
        courseTotal:0,//总数
        jobTotal:0,//总数
        workTotal:0,//总数
      };
    },
    computed: {
      uuid() {
        const { id } = qs.parse(window.location.search.replace(/^\?/, ''));
        return id;
      },
      isPerson() {
        return this.userDataBase.homepageStyle === 0;
      },
      isCompany() {
        return this.userDataBase.homepageStyle;
      },
    },
    created() {},
    mounted() {
      if (!this.$UA.isMobile) {
        window.location.href = `https://jimu.movtile.com/space/` + this.uuid;
      }

      if (!this.uuid) {
        Toast('缺少id');
        // // 处理展示的背景
        // this.gitBg();
        return;
      } else {
        // 得到数据
        this.getUserInfoExtra();
        // this.getUserInfoEducation();
        this.getUserInfoBase();
        this.getUserInfoJob();
        this.getUserWork();
        this.getUserSkill();
        this.getUserCourse();
        this.getUserBadge();
        this.getUserWall();
      }

      // PV上报
      this.$MutongPv.pv({
        pt: 'jm',
        pid: 'space',
        bid: this.uuid || '',
      });
    },
    methods: {
      // 用户的课程列表
      getUserCourse() {
        this.$service.SoPersonalCourses({ uid: this.uuid, size: 6 }).then((res) => {
          this.userDataCourse = res.rows;
          this.courseTotal = res.total
        });
      },

      // 用户作品墙
      getUserWall() {
        this.$service.UserFilmWall({ uid: this.uuid }).then((res) => {
          this.userDataWall = res.rows;
          this.wallCount = res.total;
        });
      },

      // 用户徽章列表
      getUserBadge() {
        this.$service.UserBadgeIndex({ uid: this.uuid }).then((res) => {
          this.userDataBadge = res;
        });
      },

      // TA的技能
      getUserSkill() {
        this.$service.UserSkillList({ uuid: this.uuid }).then((res) => {
          this.userDataSkill = res;
        });
      },

      // 立即沟通
      conect() {
        let toJimu = document.querySelector('.to-jimu');
        let production = document.querySelector('.production');
        let openBtn = document.querySelector('.open-btn');
        toJimu && toJimu.click();
        production && production.click();
        openBtn && openBtn.click();
      },

      // 处理展示的背景
      // gitBg() {
      //   const daylightImage = 'https://ketang-pub.movtile.com/res/homepage-daylight.jpg';
      //   const moonlightImage = 'https://ketang-pub.movtile.com/res/homepage-moonlight.jpg';
      //   const hours = dayjs().hour();
      //   this.coverImage = moonlightImage;
      //   if (hours >= 5 && hours <= 19) {
      //     this.coverImage = daylightImage;
      //   }
      // },

      // 基本信息
      getUserInfoBase() {
        this.$service.UserInfoDetail({ uuid: this.uuid }).then((res) => {
          this.userDataBase = res;
          // 设置微信分享
          wx.ready(() => {
            this.$setShareInfo({
              ...this.userDataBase.shareInfo,
              url: `https://${
                process.env.NODE_ENV === 'development' ? 'dev-' : ''
              }jimu-h5.movtile.com/user.html?id=${this.uuid}`,
            });
          });
          // 因为下面这个得用到他的数据
          this.getUserInfoProfile();
        });
      },

      // 认证信息
      getUserInfoProfile() {
        this.$service.UserInfoProfile({ uuid: this.uuid }).then((res) => {
          this.userDataProfile = res;
          // 如果是企业认证的话,背景图片得是头像
          if (this.isCompany) {
            this.coverImage = this.userDataBase.avatar;
          } else {
            // 处理展示的背景
            this.coverImage = this.userDataBase.cover;
          }
        });
      },

      // 额外信息
      getUserInfoExtra() {
        this.$service.UserExtraInfo({ uuid: this.uuid }).then((res) => {
          this.userDataExtra = res;
        });
      },

      // // 教育经历
      // getUserInfoEducation() {
      //   this.$service.UserEducationList({ uuid: this.uuid }).then((res) => {
      //     this.userDataEducation = res;
      //   });
      // },

      // 招聘列表
      getUserInfoJob() {
        this.$service.MallJobUserlist({ uuid: this.uuid }).then((res) => {
          this.userDataJob = res.rows;
          this.jobTotal = res.total
        });
      },

      // 作品
      getUserWork() {
        this.$service
          .SquareUserWork({
            uuid: this.uuid,
            size: 6,
          })
          .then((res) => {
            this.works = res.rows;
            this.workTotal = res.total
            this.works.map((item) => {
              if (item.workType === 3) {
                item.imagesNum = item.images.length;
                this.$set(item, 'imagesNum', item.images.length);
                item.images = item.images.splice(0, 4);
              }
            });
          })
          .catch((err) => {
            console.log(err);
          });
      },
    },
  };
</script>
<style lang="less" scoped>
  .user {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;

    // 背景图片
    .bg {
      position: relative;
      width: 100%;
      overflow: hidden;
      // img {
      // width: auto;
      height: 24.1rem;
      // }
    }

    .company-bg {
      position: relative;
      -webkit-filter: blur(7px);
      filter: blur(11px);
      transform: scale(1.2);
      overflow: hidden;
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #000;
        opacity: 0.3;
      }
    }

    // 基本信息啥的
    .main-info {
      position: relative;
      margin-top: -2%;
      text-align: center;
      background-color: #fff;
      border-radius: 10px 10px 0px 0px;
      .avator {
        position: absolute;
        left: 50%;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.15);
        transform: translate(-50%, -40px);
        display: block;
      }
      .info {
        padding-top: 5.6rem;
        .nickname {
          font-size: 20px;
          font-weight: 800;
          color: #111111;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0rem 2rem;
          .nickname-info {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          img {
            height: 1.8rem;
            width: 1.4rem;
            margin-left: 0.8rem;
            z-index: 10;
          }
          .badge {
            display: flex;
            align-items: center;
            z-index: 9;
            margin-top: 1px;
            margin-left: -4px;
            height: 13px;
            background-color: #111111;
            border-radius: 0px 6px 6px 0px;
            font-style: italic;
            font-size: 9px;
            color: #ffffff;
            padding: 0px 4px;
            white-space: nowrap;
            .badge-number {
              font-family: Geometos;
              font-weight: 400;
            }
            img{
              height: 8px;
              width: 5px;
              margin-left: 4px;
            }
          }
        }
        .authentication {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 10px;
          padding: 0rem 2rem;
          img {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            margin-top: 2px;
          }
          span {
            margin-left: 6px;
            font-size: 14px;
            font-weight: 400;
            color: #111111;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          &.city {
            span {
              margin-left: 0px;
            }
          }
        }
        .job {
          margin-top: 1.4rem;
          padding: 0rem 2rem;
          font-size: 14px;
          font-weight: 400;
          color: #111111;
        }
        .q-button {
          margin-top: 1.6rem;
          display: flex;
          justify-content: center;
          height: 30px;
          button {
            margin: 0px 5px;
            width: 60px;
            height: 30px;
            background: #f3f3f3;
            border-radius: 3px;
            font-size: 14px;
            font-weight: 400;
            color: #111111;
            box-sizing: border-box;
            padding: 0;
            &:last-child {
              border: 1px solid #111111;
              background-color: #fff;
            }
          }
        }
        .company {
          .company-name {
            margin-top: 2.1rem;
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: 800;
            color: #111111;
          }
          .company-info {
            margin-top: 1rem;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #111111;
            line-height: 23px;
            padding: 0rem 2rem;
            white-space: pre-line;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
          }
        }

        .wall {
          margin-top: 10px;
          padding: 20px 20px 0px;
          display: flex;
          width: 100%;
          .wall-box {
            width: calc(100% - 55px);
            display: flex;
            .wall-item {
              margin-right: 1.3rem;
              width: calc((100% - 30px) / 2);
              overflow: hidden;
              .wall-img {
                height: 187px;
                line-height: 187px;
                overflow: hidden;
                border-radius: 3px;
              }
              .title {
                font-size: 14px;
                font-weight: 800;
                color: #111111;
                line-height: 19px;
                margin-top: 1.1rem;
                text-align: left;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .wall-job {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                margin-top: 1.1rem;
                img {
                  width: 7px;
                  height: 14px;
                }
                span {
                  margin-left: 6px;
                  font-size: 14px;
                  font-weight: 400;
                  color: #111111;
                  margin-top: -1px;
                  text-align: left;
                }
              }
            }
          }
          .wall-more {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 55px;
            height: 187px;
            background: #f3f3f3;
            border-radius: 3px;
            overflow: hidden;
            span {
              display: inline-block;
              width: 10px;
              font-size: 13px;
              line-height: 1.2;
              font-weight: 800;
              color: #111111;
              white-space: normal;
            }
            .more {
              position: absolute;
              bottom: -8px;
              left: 46%;
              width: 55px;
              transform: translateX(-50%);
              font-size: 42px;
              font-family: DIN;
              font-weight: bold;
              font-style: italic;
              color: #111111;
              opacity: 0.07;
              overflow: hidden;
              white-space: nowrap;
            }
          }
        }
      }
      .q-tabs {
        margin-top: 1.5rem;
        /deep/ .van-tabs--line .van-tabs__wrap {
          width: 300px;
          margin-left: 50%;
          transform: translateX(-50%);
        }

        /deep/ .van-tab {
          .van-tab__text {
            font-size: 17px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #111111;
          }
          &.van-tab--active {
            .van-tab__text {
              font-weight: 800;
            }
          }
        }

        /deep/ .van-tabs__content {
          margin-top: 2rem;
          .van-tab__pane {
            .to-jimu {
              padding: 0rem 2rem 2rem;
              width: 100%;
            }

            // 作品样式修改
            .work {
              text-align: left;
              margin-bottom: 0rem;
              .image-work {
                margin-bottom: 0rem;
                .image-collect {
                  height: 22.1rem;
                  width: 100%;
                  .image-item {
                    border-radius: 0px;
                    height: calc((22.1rem - 0.6rem) / 2);
                    width: calc((100% - 0.6rem) / 2);
                    overflow: hidden;
                    img {
                      width: 100%;
                      height: 100%;
                    }
                    &:nth-child(2n) {
                      margin-left: 0.6rem;
                      margin-bottom: 0.6rem;
                    }
                    &.single {
                      width: 100%;
                      height: 100%;
                    }
                    &.double {
                      height: 100%;
                    }
                    &.triple {
                      &:first-child {
                        height: 100%;
                      }
                      &:nth-child(3) {
                        margin-left: 0.6rem;
                        margin-bottom: 0.6rem;
                      }
                    }
                  }
                  .end-item {
                    height: calc((22.1rem - 0.6rem) / 2);
                    width: 100%;
                    font-size: 3rem;
                    .icon-more {
                      div {
                        width: 3px;
                        height: 3px;
                        &:nth-child(2) {
                          margin: 3px 5px;
                        }
                      }
                    }
                    .more-num {
                      margin-left: 1px;
                    }
                  }
                }
              }
              // 作品样式修改
              .work-img {
                position: relative;
                border-radius: 0px;
                margin-bottom: 0rem;
                max-height: 211px;
                .duration {
                  background: transparent;
                  font-size: 14px;
                  font-family: DIN;
                  font-weight: bold;
                  color: #ffffff;
                  padding: 0px;
                  height: 3rem;
                }
              }
              .isShowtrangle{
                &::after {
                  content: '';
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  background: url(../../assets/images/icon-play-btn-light.png) top center / cover
                    no-repeat;
                  width: 20px;
                  height: 26px;
                }
              }
              .title {
                font-size: 17px;
                font-family: PingFang SC;
                font-weight: 800;
                color: #111111;
                margin: 1rem 2rem;
              }
              .category {
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #888888;
                margin-left: 2rem;
                margin-bottom: 2.7rem;
              }
            }
          }
        }
      }
    }

    .show-more {
      display: inline-block;
      width: 70%;
      height: 39px;
      line-height: 39px;
      border-radius: 10px;
      border: 1px solid #aaa;
      color: #aaa;
      margin-bottom: 10px;
      font-size: 14px;
    }

    .kong {
      width: 100%;
      height: 65px;
    }
  }
</style>
